<template>
<div>

  <Row justify="end" >
    <Input placeholder="固定网址" v-model="searchParams.url"
           style="max-width: 250px; width: 250px;" clearable class="y_condition"></Input>
    <Button type="info" icon="ios-search" class="y_condition" @click="query()">查询</Button>
  </Row>
  <divider></divider>

  <Row>
    <List border style="width: 100%">
      <template v-if="metaList.length == 0">
        <ListItem class="list_item">
          <div style="width: 100%; text-align: center; color: #ccc;">暂无数据</div>
        </ListItem>
      </template>
      <ListItem v-for="(item, index) in metaList" :key="index" class="list_item">
        <Row style="width: 100%">
          <i-col flex="auto">
            <KeyValueView title="URL">
              <a :href="getUrl(item.link_url)" target="_blank">{{getUrl(item.link_url)}}</a>
            </KeyValueView>
          </i-col>
          <i-col>
            <Button type="default" size="small" @click="showEditModal(item)">编辑</Button>
            <Button type="default" size="small" @click="preview(item)">预览</Button>
            <Button type="default" size="small" @click="publish(item)">发布</Button>
          </i-col>
        </Row>

        <KeyValueView title="HeaderTitle" v-if="hasPCMeta(item,'title')">
          {{getPCMeta(item, 'title').value}}
          <span class="list_item_words" v-if="isNotEmpty(getPCMeta(item, 'title').value)">({{getPCMeta(item, 'title').value.length}}/65)</span>
        </KeyValueView>
        <KeyValueView title="HeaderDesc" v-if="hasPCMeta(item, 'description')">
          {{getPCMeta(item, 'description').value}}
          <span class="list_item_words" v-if="isNotEmpty(getPCMeta(item, 'description').value)">({{getPCMeta(item, 'description').value.length}}/320)</span>
        </KeyValueView>
        <KeyValueView title="Keywords" v-if="hasPCMeta(item,'keywords')">
          {{getPCMeta(item, 'keywords').value}}
          <span class="list_item_words" v-if="isNotEmpty(getPCMeta(item, 'keywords').value)">({{getPCMeta(item, 'keywords').value.length}}/320)</span>
        </KeyValueView>
      </ListItem>
    </List>
  </Row>

  <div style="text-align: right; margin-top: 20px;">
    <Page :total="page.total" :page-size="page.pageSize" :current="page.pageNum"
          @on-change="changePageNum" @on-page-size-change="changePageSize" :page-size-opts="page.options"
          show-sizer show-elevator show-total/>
  </div>

  <Modal v-model="editModal.isShow" title="编辑SEO" :mask-closable="false">
    <page-meta-form :target="editParam.target" :page-meta-info-type="editParam.type" :page-meta-info-list="editParam.metaList"></page-meta-form>
    <div slot="footer">
      <Button @click="hideEditModal()">取消</Button>
      <Button type="primary" @click="saveSEO()">确定</Button>
    </div>
  </Modal>

  <Modal v-model="status.modalParents.isShow" title="解除展厅关联" :width="800" :mask-closable="false" footer-hide>
    <parent-showroom-list :showroom-id="parentsParam.showroomId" :current-time="parentsParam.currentTime"
                          @okClick="afterRemoveParents" @cancelClick="hideParentsModal"></parent-showroom-list>
  </Modal>

  <Modal v-model="status.modalChildren.isShow" title="解除展厅关联" :width="800" :mask-closable="false" footer-hide>
    <child-showroom-list :ok-text="status.modalChildren.okText" :showroom-id="childrenParam.showroomId" :current-time="childrenParam.currentTime"
                         @okClick="afterRemoveChildren" @cancelClick="hideChildrenModal"></child-showroom-list>
  </Modal>
</div>
</template>

<!--javascript 代码-->
<script>
import ICol from "../../../node_modules/view-design/src/components/grid/col";
import Icon from "../../../node_modules/view-design/src/components/icon/icon";
import KeyValueView from "../widgets/KeyValueView";
import {isEmpty, isNotEmpty} from "../js/commonUtils";
import PageMetaForm from "../stands/PageMetaForm/PageMetaForm";
import pageMetaData from "../stands/PageMetaForm/js/pageMetaData";
import {
  getDescPageMetaList,
  getKeywordsPageMetaList,
  getTitlePageMetaList,
  initPageMetaInfo
} from "../stands/PageMetaForm/js/pageMetaFuns";
import tiyData from "../stands/js/stand/list_data"
import {
  beforePreviewCheck,
  beforePublishPageCheck,
  offlineStands, previewStandRoom, publishStandRoomPage,
  publishStands,
} from "../stands/js/stand/list_funs";
import ParentShowroomList from "../stands/parentShowrromList/ParentShowroomList";
import ChildShowroomList from "../stands/childShowroomList/ChildShowroomList";

export default {
  //components: {ICol},
  components: {
    ChildShowroomList,
    ParentShowroomList,
    PageMetaForm,
    KeyValueView,
    ICol,
    Icon},
  data(){
    return {
      siteDomain: this.$store.getters.webDomain,
      searchParams: {
        url: "",
      },
      page: {
        total: 0,
        pageNum: 1,
        pageSize: 40,
        options: [40, 60, 80, 120],
      },
      metaList: [],
      editModal: {
        isShow: false,
      },
      editParam: {
        target: "",
        type: 0,
        metaList: [],
      },
      status: tiyData.tStatus,
      parentsParam: tiyData.tParam.parentsParam,
      childrenParam: tiyData.tParam.childrenParam,
    }
  }
  ,
  computed : {

  },
  methods: {
    isNotEmpty(val) {
      return isNotEmpty(val);
    },
    query() {
      let params = this.searchParams;
      params.pageNum = this.page.pageNum;
      params.pageSize = this.page.pageSize;
      this.$Spin.show();
      this.$apiOther.queryMetaPage(params).then(response => {
        this.$Spin.hide();
        this.metaList.splice(0);
        if(response.success) {
          let page = response.result;

          this.page.total = page.total;
          if(page.list != null) {
            this.metaList.push(...page.list);
          }
        }else{
          console.error(response);
          this.$Message.error(response.errorMessage);
        }
      }).catch(() => {
        this.$Spin.hide();
        this.$Message.error("查询失败");
        console.error("查询失败");
      })
    },
    changePageNum(pageNum) {
      this.page.pageNum = pageNum;
      this.query();
    },
    changePageSize(pageSize) {
      this.page.pageNum = 1;
      this.page.pageSize = pageSize;
      this.query();
    },
    getUrl(url) {
      return this.siteDomain + (isEmpty(url)?"":url);
    },
    hasPCMeta(item, name) {
      return this.getPCMeta(item, name) != null;
    },
    getPCMeta(item, name) {
      if(item.metaList != null) {
        let meta = item.metaList.find(meta => meta.name == name && (meta.terminal == pageMetaData.pageMetaDic.unionTerminal || meta.terminal == pageMetaData.pageMetaDic.pcTerminal));
        return meta;
      }
      return null;
    },
    showEditModal(item) {
      this.$Spin.show();
      this.$apiOther.queryMetaList({target: item.entity_id}).then(response => {
        this.$Spin.hide();
        if(response.success) {
          let result = response.result;
          this.initEditParam(item, result);
          initPageMetaInfo(this.editParam.target, this.editParam.type, this.editParam.metaList);
          this.editModal.isShow = true;
        }else{
          console.error(response);
          this.$Message.error("查询失败"+response.errorMessage);
        }
      }).catch(err=> {
        this.$Spin.hide();
        console.error(err);
        this.$Message.error("查询失败");
      })
    },
    initEditParam(item, metaList) {
      this.editParam.target = item.entity_id;
      this.editParam.type = this.getMetaType(item);
      this.editParam.metaList.splice(0);
      if(metaList != null) {
        this.editParam.metaList.push(...metaList);
      }
    },
    getMetaType(item) {
      switch (item.type) {
        case 1://分类
          return pageMetaData.pageMetaDic.categoryType;
        // case 2://活动
        //   return pageMetaData.pageMetaDic;
        case 3://展厅
          if(isEmpty(item.link_url)) {//首页
            return pageMetaData.pageMetaDic.indexPageType;
          }
          return pageMetaData.pageMetaDic.showroomType;
        case 4://产品集合
          return pageMetaData.pageMetaDic.productType;
        // case 5://Blog
        //   return pageMetaData.pageMetaDic
        default:
          return 0;
      }
    },
    hideEditModal() {
      this.editModal.isShow = false;
    },
    saveSEO() {
      this.$Spin.show();
      let pageMetaInfos = [];
      pageMetaInfos.push(...getTitlePageMetaList());
      pageMetaInfos.push(...getDescPageMetaList());
      pageMetaInfos.push(...getKeywordsPageMetaList());
      let params = {
        target: this.editParam.target,
        type: this.editParam.type,
        pageMetaInfos: pageMetaInfos,
      };
      this.$apiOther.savePageMetaInfos(params).then(response => {
        this.$Spin.hide();
        if(response.success) {
          this.$Message.success("保存成功");
          this.editModal.isShow = false;
          this.query();
        }else{
          console.error(response);
          this.$Message.error("保存失败："+response.errorMessage);
        }
      }).catch(err => {
        this.$Spin.hide();
        console.error(err);
        this.$Message.error("保存失败");
      })
    },
    preview(item) {
      let self = this;
      self.$Spin.show();
      let params = {id: item.entity_id};
      self.$apiStand.queryStandsById(params).then(response => {
        if(response.success) {
          beforePreviewCheck(self, response.result);
        }else{
          self.$Spin.hide();
          console.error(response);
          self.$Message.error("查询展厅失败");
        }
      }).catch(err => {
        self.$Spin.hide();
        console.error(err);
        self.$Message.error("查询展厅失败");
      })
    },
    publish(item) {
      let self = this;
      self.$Spin.show();
      let params = {id: item.entity_id};
      self.$apiStand.queryStandsById(params).then(response => {
        if(response.success) {
          beforePublishPageCheck(self, response.result);
        }else{
          self.$Spin.hide();
          console.error(response);
          self.$Message.error("查询展厅失败");
        }
      }).catch(err => {
        self.$Spin.hide();
        console.error(err);
        self.$Message.error("查询展厅失败");
      })
    },
    afterRemoveParents() {
      tiyData.tStatus.modalParents.isShow = false;
      offlineStands(this, tiyData.tParam.parentsParam.showroomId);
    },
    hideParentsModal() {
      tiyData.tStatus.modalParents.isShow = false;
    },
    afterRemoveChildren() {
      tiyData.tStatus.modalChildren.isShow = false;
      if(tiyData.tStatus.modalChildren.type == 1) {
        publishStands(this, tiyData.tParam.childrenParam.showroomId);
      }else if(tiyData.tStatus.modalChildren.type == 2){
        previewStandRoom(this, tiyData.tParam.childrenParam.index);
      }else if(tiyData.tStatus.modalChildren.type == 3) {
        publishStandRoomPage(this, tiyData.tParam.childrenParam.index);
      }
    },
    hideChildrenModal() {
      tiyData.tStatus.modalChildren.isShow = false;
    },
  },
  mounted(){

  }
}
</script>

<!--css样式-->
<style scoped lang="less">
@import  (once,optional)  "../css/base";

.list_item{
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

.list_item_words{
  padding: 0 0.5rem;
  color: #888888;
  font-size: 12px;
}

</style>
